<template>
  <div class="new-table-style">
    <el-table :border="true" :data="tableData" align="left">
      <el-table-column label="客户名称" width="350">
        <template slot-scope="scope">
          <div class="font-size-16">{{ scope.row.customerNames }}</div>
          <div v-if="scope.row.chargeItemName">
            <span>({{ scope.row.chargeItemName }}</span>
            <span v-if="scope.row.assetType">-{{ getSpaceName(scope.row.assetType) }})</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="押金类型" prop="bizTypeName"></el-table-column>
      <el-table-column label="应收金额(元)">
        <template slot-scope="scope">
          <span>{{ scope.row.amountReceivable | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已收金额(元)">
        <template slot-scope="scope">
          <span>{{ scope.row.amountReceived | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收费时间">
        <template slot-scope="scope">
          <span>{{ scope.row.chargeTime | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用金额(元)">
        <template slot-scope="scope">
          <span>{{ scope.row.useAmount | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="剩余可用金额(元)">
        <template slot-scope="scope">
          <span>{{ scope.row.remainingAmount | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" prop="remark" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click.stop="sendBack(scope.row)">退回</el-button>
          <el-button type="text" @click.stop="deduction(scope.row)">抵扣</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="total > 0" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />

    <div class="absolute-box btn-box">
      <el-button type="primary" size="mini" @click="exportFn">导出</el-button>
    </div>

    <send-back ref="refBack" :currentBill="currentBill" @refresh="getList"></send-back>
    <deduction ref="deduction" :currentBill="currentBill" @refresh="getList" :options="options"></deduction>
  </div>
</template>

<script>
  import { apiDepositList, apiDepositExport } from '../../../api/depositManage';
  import { accSubtr } from '@/common/js/utils.js';
  import sendBack from './sendBack.vue';
  import deduction from './deduction.vue';

  export default {
    name: 'billTable',
    props: {
      activeTab: {
        type: String,
        default: '',
      },
      bizTypeList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      spaceTypeList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },

    data() {
      return {
        tableData: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        currentBill: {},
      };
    },

    methods: {
      init() {
        this.getList();
      },

      //数据源
      async getList(more) {
        let bizTypeList = this.getBizList();
        let res = await apiDepositList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          bizTypeList: bizTypeList,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //退回
      async sendBack(row) {
        this.currentBill = row;
        await this.$nextTick(() => {});
        this.$refs.refBack.init();
      },

      //抵扣
      async deduction(row) {
        this.currentBill = row;
        await this.$nextTick(() => {});
        this.$refs.deduction.init();
      },

      getBizList() {
        let bizTypeList = [];
        if (this.activeTab == 1) {
          bizTypeList = ['performanceDeposit'];
        } else if (this.activeTab == 2) {
          bizTypeList = ['waterFeeDeposit', 'electricityDeposit'];
        } else if (this.activeTab == 3) {
          bizTypeList = ['POSDeposit', 'constructionDeposit', 'keyDeposit', 'decorationDeposit', 'salespersonDeposit'];
        } else if (this.activeTab == 4) {
          bizTypeList = [];
        }
        return bizTypeList;
      },

      getBizName(key) {
        let target = this.bizTypeList.find(item => item.key == key);
        return target ? target.value : '';
      },

      getSpaceName(key) {
        let target = this.spaceTypeList.find(item => item.key == key);
        return target ? target.value : '';
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getList('more');
      },

      //导出
      exportFn() {
        let bizTypeList = this.getBizList();
        apiDepositExport({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          bizTypeList: bizTypeList,
        });
      },
    },
    mounted() {},

    components: { sendBack, deduction },
  };
</script>

<style lang="scss" scoped>
  .btn-box {
    right: 0;
    top: -45px;
  }
</style>
